<template>
  <div>
    <el-menu
      :default-active="activeIndex2"
      class="el-menu-demo"
      mode="horizontal"
      @select="handleSelect"
      background-color="#545c64"
      text-color="#fff"
      active-text-color="#ffd04b"
    >
      <el-menu-item index="1"
        ><router-link to="/">主页</router-link></el-menu-item
      >
      <el-menu-item index="2"
        ><router-link to="/add"> 新增</router-link></el-menu-item
      >
    </el-menu>

    <el-table :data="userData" border style="width: 100%">
      <el-table-column prop="userId" label="userId" width="180">
      </el-table-column>
      <el-table-column prop="tenantId" label="tenantId" width="180">
      </el-table-column>
      <el-table-column prop="userName" label="userName"> </el-table-column>
      <el-table-column prop="userCode" label="userCode" width="180">
      </el-table-column>
      <el-table-column prop="password" label="password" width="180">
      </el-table-column>
      <el-table-column prop="orgId" label="orgId"> </el-table-column>
      <el-table-column prop="mobile" label="mobile" width="180">
      </el-table-column>
      <el-table-column prop="userTypeCode" label="userTypeCode" width="180">
      </el-table-column>
      <el-table-column prop="userStatusCode" label="userStatusCode">
      </el-table-column>
      <el-table-column prop="createdBy" label="createdBy" width="180">
      </el-table-column>
      <el-table-column prop="createdTime" label="createdTime" width="180">
      </el-table-column>
      <el-table-column prop="updatedBy" label="updatedBy"> </el-table-column>
      <el-table-column prop="updatedTime" label="updatedTime" width="180">
      </el-table-column>
      <el-table-column prop="modiNum" label="modiNum" width="180">
      </el-table-column>
      <el-table-column prop="lockTime" label="lockTime"> </el-table-column>
      <el-table-column prop="passwordRetries" label="passwordRetries">
      </el-table-column>
      <el-table-column prop="passwordUpdateTime" label="passwordUpdateTime">
      </el-table-column>
      <el-table-column prop="userSkin" label="userSkin"> </el-table-column>
      <el-table-column prop="userId" label="操作">
        <template slot-scope="scope">
          <el-button @click="deleted(scope.row)" type="text" size="small"
            >删除</el-button
          >
          <el-button type="text" size="small" @click="hand(scope.row)"
            >编辑</el-button
          >
        </template>
      </el-table-column>
    </el-table>
    <div class="block" style="margin-top: 15px">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[10, 15, 20, 25]"
        :page-size="pageSize"
        layout="total, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  data() {
    return {
      userData: [],
      currentPage: 1, // 当前页码
      total: 20, // 总条数
      pageSize: 5, // 每页的数据条数
    };
  },
  mounted() {
    this.getData(1);
  },
  methods: {
    getData(num1) {
      var that = this;
      axios
        .get("http://localhost:10086/sysUser/selectAll", {
          params: {
            currentPage: num1, // 当前页码
          },
        })
        .then((response) => {
          console.log(response);
          console.log("请求成功");
          //因为后台帮助分页，所以后台需要将一些数据传到前端，当然就不止有数据了，例如：数据的总数等等
          that.userData = response.data;
          that.currentPage = num1;
          //因为每次请求的页数不同，所以采用一个变量代替
        })
        .catch((error) => {
          console.log(errror);
        });
    },
    hand(row) {
      this.$router.push({ path: "/edit", query: { userId: row.userId } });
    },
    deleted(userId) {
      var deleteConfirm = confirm("是否删除");
      if (deleteConfirm) {
        axios({
          method: "post",
          url: "http://localhost:10086/sysUser/delet",
          data: "&userId=" + userId.userId,
        })
          .then((response) => {
            console.log(response);
            this.getData();
          })
          .catch((error) => {
            console.log(error);
          });
      }
    },
    //每页条数改变时触发 选择一页显示多少行
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.currentPage = 1;
      this.pageSize = 5;
    },
    //当前页改变时触发 跳转其他页
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val;
      this.getData(val);
    },
  },
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
table {
  border-collapse: collapse;
}
td,
th {
  border: 1px solid #000;
}
</style>